import React from 'react';
import { BackHandler, DeviceEventEmitter, Image, NativeModules, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';

import DelayTouchableOpacity from '../Component/DelayTouchableOpacity'
import { AlertDialog, SimpleItemsBottom } from 'react-native-pickers'

import Constant from '../Constant/Constant'
import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import ToastUtils from '../Utils/ToastUtils'
import HttpUtils from '../Utils/HttpUtils'
import RouterUtils from '../Utils/RouterUtils'
import StorageUtils from '../Utils/StorageUtils'
import GlobalUtils from '../Utils/GlobalUtils'
import TimeUtils from '../Utils/TimeUtils'

var appInterval;

export default class NavigatorHome extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            hsCnt: 0,
            clCnt: 0,
            hcCnt: 0,
            dbCnt: 0,
            zpCnt: 0,
            appmenus: [],
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('Tab', this.props.navigation.state.key);
        DeviceEventEmitter.addListener('homeReload', (events) => this.homeReload());
        DeviceEventEmitter.addListener('appReloadInterval', (events) => this.appReloadInterval());
        StorageUtils.get('session').then((session) =>
        {
            if (session == null || session == '')
            {
                this.props.navigation.navigate('UserLogin');
            } else
            {
                this.homeReload();
                this.appReloadInterval();
                StorageUtils.get('username').then((username) =>
                {
                    NativeModules.DeviceNativeModule.startTrack(username, (result) =>
                    {

                    });
                });
            }
        });
    }

    componentWillMount()
    {
        BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
        console.log('componentWillMount')
    }

    onBackAndroid = () =>
    {
        if (RouterUtils.array.length == 1)
        {
            if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now())
            {
                // BackHandler.exitApp();
                NativeModules.DeviceNativeModule.exitApp();
                return false;
            }
            this.lastBackPressed = Date.now();
            ToastUtils.toastShortBottom('再按一次退出应用');
            return true;
        }
    }

    appReloadInterval()
    {
        var that = this;
        clearTimeout(appInterval) && clearInterval(appInterval)
        appInterval = setInterval(function ()
        {
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.getJsonWithoutLoading(Constant.todoCounts, session, function (resultcode, data)
                    {
                        that.setState({
                            hsCnt: data.hsCnt,
                            clCnt: data.clCnt,
                            hcCnt: data.hcCnt,
                            dbCnt: data.dbCnt,
                            zpCnt: data.zpCnt,
                        })
                    }, function (resultcode, reason)
                    {
                        if (resultcode == '401')
                        {
                            ToastUtils.toastShortBottom('登录失效，请重新登录');
                            StorageUtils.save('session', '');
                            that.props.navigation.navigate('UserLogin');
                        } else
                        {
                            ToastUtils.toastShortBottom('其他原因失败，错误码:' + resultcode);
                        }
                    });
                }
            });
        }, 5000);
    }

    homeReload()
    {
        var that = this;
        StorageUtils.get('session').then((session) =>
        {
            if (session != '' && session != null)
            {
                HttpUtils.getJson(Constant.todoCounts, session, function (resultcode, data)
                {
                    that.setState({
                        hsCnt: data.hsCnt,
                        clCnt: data.clCnt,
                        hcCnt: data.hcCnt,
                        dbCnt: data.dbCnt,
                        zpCnt: data.zpCnt,
                    })
                }, function (resultcode, reason)
                {
                    ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                });
            }
        });
        StorageUtils.get('appmenus').then((appmenus) =>
        {
            that.setState({
                appmenus: appmenus
            })
        });
    }

    jumpPage(page)
    {
        if (page == 'ajcl')
        {
            //案件处理
            this.props.navigation.navigate('PageAjclList');
        }
        if (page == 'xchs')
        {
            //现场核实
            this.props.navigation.navigate('PageXchsList');
        }
        if (page == 'xchc')
        {
            //现场核查
            this.props.navigation.navigate('PageXchcList');
        }
        if (page == 'wtsb')
        {
            //问题上报
            this.props.navigation.navigate('PageWtsbList');
        }
        if (page == 'kssb')
        {
            //快速上报
            this.props.navigation.navigate('PageKssbList');
        }
        if (page == 'lddb')
        {
            //领导督办
            this.props.navigation.navigate('PageLddbList');
        }
        if (page == 'bjgx')
        {
            //部件更新
            this.SimpleItemsDialog.show();
        }
        if (page == 'lsaj')
        {
            //历史案件
            this.props.navigation.navigate('PageLsajList');
        }
        if (page == 'ajzp')
        {
            //案件指派
            this.props.navigation.navigate('PageAjzpList');
        }
        if (page == 'cqdk')
        {
            //出勤打卡
            this.props.navigation.navigate('UserClock');
        }
        if (page == 'fwcj')
        {
            //房屋采集
            // this.props.navigation.navigate('PageFwcj');
            this.props.navigation.navigate('PageLwpc');
        }
    }

    renderMenus()
    {
        let allData = [];
        for (let i = 0; i < this.state.appmenus.length; i++)
        {
            let item = this.state.appmenus[i];
            if (item == 'wtsb')
            {
                allData.push(
                    <DelayTouchableOpacity key={'wtsb'} activeOpacity={0.5} onPress={() => this.jumpPage('wtsb')}>
                        <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_wtsb.png')}/>
                                <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>问题上报</Text>
                            </View>
                            <View style={{display: 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                                <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>5</Text>
                            </View>
                        </View>
                    </DelayTouchableOpacity>
                )
            }
            if (item == 'kssb')
            {
                allData.push(
                    <DelayTouchableOpacity key={'kssb'} activeOpacity={0.5} onPress={() => this.jumpPage('kssb')}>
                        <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_kssb.png')}/>
                                <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>快速处置</Text>
                            </View>
                            <View style={{display: 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                                <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>5</Text>
                            </View>
                        </View>
                    </DelayTouchableOpacity>
                )
            }
            if (item == 'ajcl')
            {
                allData.push(
                    <DelayTouchableOpacity key={'ajcl'} activeOpacity={0.5} onPress={() => this.jumpPage('ajcl')}>
                        <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_ajcl.png')}/>
                                <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件处理</Text>
                            </View>
                            <View style={{display: this.state.clCnt > 0 ? 'flex' : 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                                <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>{this.state.clCnt}</Text>
                            </View>
                        </View>
                    </DelayTouchableOpacity>
                )
            }
            if (item == 'xchs')
            {
                allData.push(
                    <DelayTouchableOpacity key={'xchs'} activeOpacity={0.5} onPress={() => this.jumpPage('xchs')}>
                        <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_xchs.png')}/>
                                <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>现场核实</Text>
                            </View>
                            <View style={{display: this.state.hsCnt > 0 ? 'flex' : 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                                <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>{this.state.hsCnt}</Text>
                            </View>
                        </View>
                    </DelayTouchableOpacity>
                )
            }
            if (item == 'xchc')
            {
                allData.push(
                    <DelayTouchableOpacity key={'xchc'} activeOpacity={0.5} onPress={() => this.jumpPage('xchc')}>
                        <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_xchc.png')}/>
                                <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>现场核查</Text>
                            </View>
                            <View style={{display: this.state.hcCnt > 0 ? 'flex' : 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                                <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>{this.state.hcCnt}</Text>
                            </View>
                        </View>
                    </DelayTouchableOpacity>
                )
            }
            if (item == 'lddb')
            {
                allData.push(
                    <DelayTouchableOpacity key={'lddb'} activeOpacity={0.5} onPress={() => this.jumpPage('lddb')}>
                        <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_lddb.png')}/>
                                <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>领导督办</Text>
                            </View>
                            <View style={{display: this.state.dbCnt > 0 ? 'flex' : 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                                <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>{this.state.dbCnt}</Text>
                            </View>
                        </View>
                    </DelayTouchableOpacity>
                )
            }
            // if (item == 'bjgx')
            // {
            //     allData.push(
            //         <DelayTouchableOpacity key={'bjgx'} activeOpacity={0.5} onPress={() => this.jumpPage('bjgx')}>
            //             <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
            //                 <View style={{justifyContent: 'center', alignItems: 'center'}}>
            //                     <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_bjgx.png')}/>
            //                     <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>部件更新</Text>
            //                 </View>
            //                 <View style={{display: 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
            //                     <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>5</Text>
            //                 </View>
            //             </View>
            //         </DelayTouchableOpacity>
            //     )
            // }
            if (item == 'ajzp')
            {
                allData.push(
                    <DelayTouchableOpacity key={'ajzp'} activeOpacity={0.5} onPress={() => this.jumpPage('ajzp')}>
                        <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_bjgx.png')}/>
                                <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件指派</Text>
                            </View>
                            <View style={{display: this.state.zpCnt > 0 ? 'flex' : 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                                <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>{this.state.zpCnt}</Text>
                            </View>
                        </View>
                    </DelayTouchableOpacity>
                )
            }
            if (item == 'lsaj')
            {
                allData.push(
                    <DelayTouchableOpacity key={'lsaj'} activeOpacity={0.5} onPress={() => this.jumpPage('lsaj')}>
                        <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_lsaj.png')}/>
                                <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>综合查询</Text>
                            </View>
                            <View style={{display: 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                                <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>5</Text>
                            </View>
                        </View>
                    </DelayTouchableOpacity>
                )
            }
        }
        allData.push(
            <DelayTouchableOpacity key={'cqdk'} activeOpacity={0.5} onPress={() => this.jumpPage('cqdk')}>
                <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                    <View style={{justifyContent: 'center', alignItems: 'center'}}>
                        <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_cqdk.png')}/>
                        <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>出勤打卡</Text>
                    </View>
                    <View style={{display: 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                        <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>5</Text>
                    </View>
                </View>
            </DelayTouchableOpacity>
        )
        allData.push(
            <DelayTouchableOpacity key={'fwcj'} activeOpacity={0.5} onPress={() => this.jumpPage('fwcj')}>
                <View style={{width: ScreenUtils.width / 3, marginTop: 32, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                    <View style={{justifyContent: 'center', alignItems: 'center'}}>
                        <Image resizeMode={Image.resizeMode.stretch} style={{width: 60, height: 60}} source={require('../img/home_fwcj.png')}/>
                        <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>两违排查</Text>
                    </View>
                    <View style={{display: 'none', marginLeft: -20, marginBottom: 70, backgroundColor: 'red', height: 20, width: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
                        <Text style={{fontSize: ScreenUtils.Font_10, color: ColorUtils.white}}>5</Text>
                    </View>
                </View>
            </DelayTouchableOpacity>
        )
        return allData;
    }

    render()
    {
        return (
            <View style={styles.container}>
                <View style={{flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center'}}>
                    {this.renderMenus()}
                </View>
                <SimpleItemsBottom
                    items={[{value: '新增部件'}, {value: '更新部件'}]}
                    itemKey='value'
                    ref={ref => this.SimpleItemsDialog = ref}
                    onPress={(which) =>
                    {
                        if (which == '0')
                        {
                            this.props.navigation.navigate('PageBjgxAdd');
                        } else
                        {
                            this.props.navigation.navigate('PageBjgxEdit');
                        }
                    }}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.white,
    },
});


